﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="menu.aspx.cs" Inherits="WebApplication1.menu" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <%--style css cho menu--%>
    <style type="text/css">
        #box_nav
        {
            height: 40px;
            margin: 0 0 0 9px;
            overflow: hidden;
            width: 1000px;
            z-index: 20000;
        }
        #box_nav li.nav_li
        {
            display: inline-block;
            float: left;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
        }
        #box_nav li:hover a.nav_a, #box_nav li.active a.nav_a
        {
            color: #B00400;
        }
        #box_nav li.nav_li a.nav_a
        {
            background: url("http://resources.news.com.au/cs/newscomau/v2/_shared/base/css/images/bullets/menu-arrows.png") no-repeat scroll right -78px transparent;
            box-shadow: 0 0 26px 5px transparent;
            color: #000000;
            display: block;
            font-family: arial,san-serif;
            font-size: 14px;
            font-weight: 700;
            padding: 16px 13px 9px 9px;
            text-decoration: none;
            z-index: 500;
            position: relative;
        }
        #box_nav .wait
        {
            display: block;
            margin: 50px auto;
            height: 64px;
            width: 64px;
        }
        #box_nav .nav_content
        {
            background: url("megamenu-bg.png") repeat scroll 0 0 transparent;
            display: none;
            height: 431px;
            left: -10px;
            position: absolute;
            top: 36px;
            width: 1055px;
            z-index: 200;
        }
        #box_nav li:hover a.nav_a
        {
            -moz-border-bottom-colors: none;
            -moz-border-left-colors: none;
            -moz-border-right-colors: none;
            -moz-border-top-colors: none;
            background: none repeat scroll 0 0 #FFFFFF;
            border-color: #D0D0D0 #D0D0D0 #FFFFFF;
            border-image: none;
            border-style: solid;
            border-width: 1px;
            box-shadow: 0 0 26px 5px rgba(0, 0, 0, 0.15);
            color: #000000;
            padding: 9px 10px;
            text-decoration: none;
        }
        #nav li.nav_content
        {
            float: left;
            width: 865px;
        }
        #nav
        {
            background: url("http://resources2.news.com.au/cs/newscomau/v2/_shared/base/css/images/backgrounds/nav-border.png") no-repeat scroll -12px 35px transparent;
            float: none;
            width: 1000px;
            position: relative;
            padding: 0;
            margin: auto;
        }
        #nav .nav
        {
            margin: 20px auto 0 25px;
            padding: 0;
            width: 180px;
            float: left;
        }
        #nav .nav li
        {
            margin: 0px;
            list-style: none;
        }
        #nav .nav li a
        {
            font: 700 12px Arial,Helvetica,sans-serif;
            color: #76808C;
            display: block;
            width: 144px;
            line-height: 30px;
            font-weight: bold;
            text-decoration: none;
            height: 30px;
            border-bottom: 1px solid #e5e5e5;
        }
        #nav .nav li a:hover
        {
            text-decoration: underline;
        }
        #nav .block_content
        {
            margin-top: 20px;
        }
        #nav .block_content .col_left
        {
            float: left;
            width: 510px;
        }
        #nav .col_left .left
        {
            float: left;
            width: 178px;
        }
        #nav .col_left .right
        {
            float: left;
            width: 330px;
        }
        #nav .col_rig
        {
            float: left;
            width: 340px;
        }
        #nav .col_left .box_content img
        {
            width: 100px;
            height: 75px;
            border: 1px solid #CCC;
            display: block;
        }
        #nav .col_left .left img
        {
            margin: 35px 0 15px 23px;
        }
        #nav .col_left .left .content_title
        {
            background: none repeat scroll 0 0 transparent;
            color: #818181;
            display: block;
            font: 700 16px "Unit Slab Pro Bold" , "Times New Roman" ,Times,serif;
            padding: 0;
            width: 155px;
            text-align: center;
        }
        #nav .col_left .left .content_intro:hover
        {
            text-decoration: underline;
        }
        #nav .col_left .left .content_intro
        {
            text-decoration: none;
            text-align: center;
            color: #4A4A4A;
            font: 400 17px/17px "Unit Slab Pro Light" , "Times New Roman" ,Times,serif;
            text-shadow: 0 0 1px rgba(154, 154, 154, 0.3);
            width: 155px;
            display: block;
            font: 400 17px/17px "Unit Slab Pro Light" , "Times New Roman" ,Times,serif;
            line-height: 20px;
            margin: 5px 0 0;
        }
        #nav .col_left .right .box_content .content_title
        {
            color: #000000;
            display: block;
            font: 400 17px/20px "Unit Slab Pro Bold" , "Times New Roman" ,Times,serif;
            font-weight: bold;
            margin: 0 0 8px 0;
            text-decoration: none;
        }
        #nav .col_left .right .box_content img
        {
            float: left;
            margin: 0 12px 0 0;
        }
        #nav .col_left .right .box_content .content_intro
        {
            float: left;
            width: 215px;
            color: #3a3a3a;
        }
        #nav .col_left .right .box_content
        {
            margin: 2px 0px 2px 0;
            padding-bottom: 26px;
        }
        #nav .col_left .right .more
        {
            text-align: right;
        }
        #nav .col_left .right .more a
        {
            color: #76808C;
            text-transform: uppercase;
            font-size: 12px;
            text-decoration: underline;
        }
        #nav .col_rig .title
        {
            color: #4C4C4C;
            font: bold 13px "Unit Slab Pro Bold" , "Times New Roman" ,Times,serif;
            height: auto;
            padding: 0 0 5px;
            text-transform: uppercase;
            width: auto;
        }
        #nav .col_rig .content_title
        {
            background: url("http://resources2.news.com.au/cs/newscomau/v2/_shared/base/css/images/bullets/megamenu-sprite-icons-tools.gif") no-repeat scroll 303px -2589px transparent;
            color: #4C4C4C;
            display: block;
            font-weight: bold;
            height: 30px;
            padding: 9px 0 0;
            text-decoration: none;
            width: 100%;
        }
        #nav .col_rig img
        {
            height: 190px;
            text-align: center;
            width: auto;
        }
        #nav .col_left .right .box_content .title
        {
            color: #4C4C4C;
            font: 400 13px "Unit Slab Pro Bold" , "Times New Roman" ,Times,serif;
            height: auto;
            padding: 0;
            text-transform: uppercase;
            width: auto;
        }
        .clr
        {
            clear: both;
            float: none;
        }
    </style>
    <%--jquery--%>

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>

    <%--script  cho menu--%>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#box_nav >li").addClass("nav_li");
            $("#box_nav >li >a").addClass("nav_a");
            $("#box_nav li ").hover(function() {
                $(this).find(".nav_content").css("display", "block");

            }, function() {
                $(this).find(".nav_content").css("display", "none");
            });
        });
    </script>

</head>
<body>
    
    <div id="nav">
        <ul id="box_nav">
            <%-- trong the` <a title="?"> title la`ma~ id cua` tin--%>
            <li><a>News</a>
                <div class="nav_content">
                    <ul class="nav">
                        <li><a href="">breaking news</a></li>
                        <li><a href="">markets</a></li>
                        <li><a href="">Dollar</a></li>
                        <li><a href="">your business</a></li>
                        <li><a href="">Worline</a></li>
                        <li><a href="">Companies</a></li>
                        <li><a href="">Excutetive lounge</a></li>
                        <li><a href="">archer</a></li>
                    </ul>
                    <div class="block_content" style="display: block;">
                        <div class="col_left">
                            <div class="left box_content">
                                <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                <div class="content_title">
                                    your business</div>
                                <a class="content_intro" href="">Chirmarcomes early for online sdgsdj</a>
                            </div>
                            <div class="right">
                                <div class="title">
                                    topStory</div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="more">
                                    <a href="">more business>></a></div>
                            </div>
                        </div>
                        <div class="col_rig">
                            <div class="title">
                                video hightlight</div>
                            <img src="http://content4.video.news.com.au/NDM_-_news.com.au/155/901/prank_648x365_2309887075-hero.jpg" />
                            <a href="" class="content_title">Going up video</a>
                        </div>
                    </div>
                </div>
            </li>
            <li><a>Business</a>
                <div class="nav_content">
                    <ul class="nav">
                        <li><a href="">breaking news</a></li>
                        <li><a href="">markets</a></li>
                        <li><a href="">Dollar</a></li>
                        <li><a href="">your business</a></li>
                        <li><a href="">Worline</a></li>
                        <li><a href="">Companies</a></li>
                        <li><a href="">Excutetive lounge</a></li>
                        <li><a href="">archer</a></li>
                    </ul>
                    <div class="block_content" style="display: block;">
                        <div class="col_left">
                            <div class="left box_content">
                                <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                <div class="content_title">
                                    your business</div>
                                <a class="content_intro" href="">Chirmarcomes early for online sdgsdj</a>
                            </div>
                            <div class="right">
                                <div class="title">
                                    topStory</div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="more">
                                    <a href="">more business>></a></div>
                            </div>
                        </div>
                        <div class="col_rig">
                            <div class="title">
                                video hightlight</div>
                            <img src="http://content4.video.news.com.au/NDM_-_news.com.au/155/901/prank_648x365_2309887075-hero.jpg" />
                            <a href="" class="content_title">Going up video</a>
                        </div>
                    </div>
                </div>
            </li>
            <li><a>Sport</a>
                <div class="nav_content">
                    <ul class="nav">
                        <li><a href="">breaking news</a></li>
                        <li><a href="">markets</a></li>
                        <li><a href="">Dollar</a></li>
                        <li><a href="">your business</a></li>
                        <li><a href="">Worline</a></li>
                        <li><a href="">Companies</a></li>
                        <li><a href="">Excutetive lounge</a></li>
                        <li><a href="">archer</a></li>
                    </ul>
                    <div class="block_content" style="display: block;">
                        <div class="col_left">
                            <div class="left box_content">
                                <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                <div class="content_title">
                                    your business</div>
                                <a class="content_intro" href="">Chirmarcomes early for online sdgsdj</a>
                            </div>
                            <div class="right">
                                <div class="title">
                                    topStory</div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="more">
                                    <a href="">more business>></a></div>
                            </div>
                        </div>
                        <div class="col_rig">
                            <div class="title">
                                video hightlight</div>
                            <img src="http://content4.video.news.com.au/NDM_-_news.com.au/155/901/prank_648x365_2309887075-hero.jpg" />
                            <a href="" class="content_title">Going up video</a>
                        </div>
                    </div>
                </div>
            </li>
            <li><a>Entertainment</a>
                <div class="nav_content">
                    <ul class="nav">
                        <li><a href="">breaking news</a></li>
                        <li><a href="">markets</a></li>
                        <li><a href="">Dollar</a></li>
                        <li><a href="">your business</a></li>
                        <li><a href="">Worline</a></li>
                        <li><a href="">Companies</a></li>
                        <li><a href="">Excutetive lounge</a></li>
                        <li><a href="">archer</a></li>
                    </ul>
                    <div class="block_content" style="display: block;">
                        <div class="col_left">
                            <div class="left box_content">
                                <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                <div class="content_title">
                                    your business</div>
                                <a class="content_intro" href="">Chirmarcomes early for online sdgsdj</a>
                            </div>
                            <div class="right">
                                <div class="title">
                                    topStory</div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="more">
                                    <a href="">more business>></a></div>
                            </div>
                        </div>
                        <div class="col_rig">
                            <div class="title">
                                video hightlight</div>
                            <img src="http://content4.video.news.com.au/NDM_-_news.com.au/155/901/prank_648x365_2309887075-hero.jpg" />
                            <a href="" class="content_title">Going up video</a>
                        </div>
                    </div>
                </div>
            </li>
            <li><a>Lifestyle</a>
                <div class="nav_content">
                    content @#
                </div>
            </li>
            <li><a>Travel</a>
                <div class="nav_content">
                    content
                </div>
            </li>
            <li><a>Realestate</a>
                <div class="nav_content">
                    <ul class="nav">
                        <li><a href="">breaking news</a></li>
                        <li><a href="">markets</a></li>
                        <li><a href="">Dollar</a></li>
                        <li><a href="">your business</a></li>
                        <li><a href="">Worline</a></li>
                        <li><a href="">Companies</a></li>
                        <li><a href="">Excutetive lounge</a></li>
                        <li><a href="">archer</a></li>
                    </ul>
                    <div class="block_content" style="display: block;">
                        <div class="col_left">
                            <div class="left box_content">
                                <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                <div class="content_title">
                                    your business</div>
                                <a class="content_intro" href="">Chirmarcomes early for online sdgsdj</a>
                            </div>
                            <div class="right">
                                <div class="title">
                                    topStory</div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="more">
                                    <a href="">more business>></a></div>
                            </div>
                        </div>
                        <div class="col_rig">
                            <div class="title">
                                video hightlight</div>
                            <img src="http://content4.video.news.com.au/NDM_-_news.com.au/155/901/prank_648x365_2309887075-hero.jpg" />
                            <a href="" class="content_title">Going up video</a>
                        </div>
                    </div>
                </div>
            </li>
            <li><a>Money</a>
                <div class="nav_content">
                    <ul class="nav">
                        <li><a href="">breaking news</a></li>
                        <li><a href="">markets</a></li>
                        <li><a href="">Dollar</a></li>
                        <li><a href="">your business</a></li>
                        <li><a href="">Worline</a></li>
                        <li><a href="">Companies</a></li>
                        <li><a href="">Excutetive lounge</a></li>
                        <li><a href="">archer</a></li>
                    </ul>
                    <div class="block_content" style="display: block;">
                        <div class="col_left">
                            <div class="left box_content">
                                <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                <div class="content_title">
                                    your business</div>
                                <a class="content_intro" href="">Chirmarcomes early for online sdgsdj</a>
                            </div>
                            <div class="right">
                                <div class="title">
                                    topStory</div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="box_content">
                                    <a class="content_title" href="">your business</a>
                                    <img class="content_image" src="http://resources2.news.com.au/images/2011/12/19/1226225/322754-germany-tradition-christmas-retail-shopping.jpg" />
                                    <div class="content_intro">
                                        Chirmarcomes early for online sdgsdj</div>
                                    <div class="clr">
                                    </div>
                                </div>
                                <div class="more">
                                    <a href="">more business>></a></div>
                            </div>
                        </div>
                        <div class="col_rig">
                            <div class="title">
                                video hightlight</div>
                            <img src="http://content4.video.news.com.au/NDM_-_news.com.au/155/901/prank_648x365_2309887075-hero.jpg" />
                            <a href="" class="content_title">Going up video</a>
                        </div>
                    </div>
                </div>
            </li>
            <div style="clear: both">
            </div>
        </ul>
    </div>
  
</body>
</html>
